<template>
  <div class="goods">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="success" plain @click="goGoodsAdd">添加商品</el-button>
    <el-table ref="goods" :data="goods" highlight-current-row style="width: 100%">
      <el-table-column type="index" :index="indexMethod" width="50" label="#">
      </el-table-column>
      <el-table-column property="goods_name" label="商品名称">
      </el-table-column>
      <el-table-column property="goods_price" label="商品价格">
      </el-table-column>
      <el-table-column property="goods_weight" label="商品重量">
      </el-table-column>
      <el-table-column property="add_time" label="创建时间">
        <template v-slot:default="goodsInfo">
          {{ goodsInfo.row.add_time | time('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column property="option" label="操作">
        <template v-slot:default="goods">
          <el-button type="primary" plain @click="edit(goods.row)">编辑</el-button>
          <el-button type="danger" plain @click="showDelDialog">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      Pnp: '',
      pagenum: 1,
      pagesize: 5,
      goods: [],
      total: null
    }
  },
  methods: {
    async getGoodsList () {
      try {
        let res = await this.$axios.get('goods', {
          params: { Pnp: this.Pnp, pagenum: this.pagenum, pagesize: this.pagesize }
        })
        console.log(res)
        let { meta, data } = res
        if (meta.status !== 200) {
          this.$message.error(meta.msg)
        }
        this.goods = data.goods
        this.total = data.total
      } catch (e) {
        this.$message.error('数据请求失败')
      }
    },
    edit (row) {
      console.log(row)
      this.$router.push('/goods-add?id=' + row.goods_id)
    },
    showDelDialog () {},
    goGoodsAdd () {
      this.$router.push('/goods-add')
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.pagenum = 1
      this.getGoodsList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.pagenum = val
      this.getGoodsList()
    },
    indexMethod (index) {
      return index + 1 + (this.pagenum - 1) * this.pagesize
    }
  },
  async created () {
    this.getGoodsList()
  }
}
</script>

<style lang="scss" scoped>
  .el-breadcrumb{
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #ccc
  }
  .el-button{
    margin: 10px 0
  }
</style>
